<template>
  <Card>
    <Tabs value="逸华加气">
      <TabPane label="逸华加气" name="逸华加气">
        <Form ref="searchYhForm" :label-width="90" :model="searchYhForm" inline>
          <Form-item label="车辆线路：" prop="line">
            <Select
              v-model="searchYhForm.line"
              clearable
              filterable
              placeholder="选择线路"
              style="width:200px;"
            >
              <Option value="-1">全部</Option>
              <Option v-for="item in lines" :key="item.value" :value="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>
          <Form-item label="日期：" prop="date_time">
            <DatePicker
              v-model="searchYhForm.start_date_time"
              placeholder="请选择开始日期"
              style="width: 200px"
              type="date"
              @on-change="searchYhForm.start_date_time=$event"
            ></DatePicker>
            <DatePicker
              v-model="searchYhForm.end_date_time"
              placeholder="请选择结束日期"
              style="width: 200px"
              type="date"
              @on-change="searchYhForm.end_date_time=$event"
            ></DatePicker>
          </Form-item>
          <Form-item style="margin-left:-90px;">
            <Button icon="md-search" type="primary" @click="handleSearch('yh')">搜索</Button>
            <Button @click="handleReset('yh')">重置</Button>
          </Form-item>
        </Form>
        <Button
          :disabled="exportBtnDisable"
          icon="md-cloud-download"
          style="margin-bottom:15px"
          type="primary"
          @click="exportGasStati('yh')"
        >导出
        </Button>
        <Table
          :columns="yhColumns"
          :data="yhData"
          :loading="yhLoading"
          border
          size="small"
          stripe></Table>
        <Row class="page" justify="end" type="flex">
          <Page
            :current="searchYhForm.pageNumber"
            :page-size="searchYhForm.pageSize"
            :total="yhTotal"
            show-total
            @on-change="changePage($event, 'yh')"
          />
        </Row>
      </TabPane>
      <TabPane label="顺康加气" name="顺康加气">
        <Form ref="searchSkForm" :label-width="90" :model="searchSkForm" inline>
          <Form-item label="车辆线路：" prop="line">
            <Select
              v-model="searchSkForm.line"
              clearable
              filterable
              placeholder="选择线路"
              style="width:200px;"
            >
              <Option value="-1">全部</Option>
              <Option v-for="item in lines" :key="item.value" :value="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>
          <Form-item label="日期：" prop="date_time">
            <DatePicker
              v-model="searchSkForm.start_date_time"
              placeholder="请选择开始日期"
              style="width: 200px"
              type="datetime"
              @on-change="searchSkForm.start_date_time=$event"
            ></DatePicker>
            <DatePicker
              v-model="searchSkForm.end_date_time"
              placeholder="请选择结束日期"
              style="width: 200px"
              type="datetime"
              @on-change="searchSkForm.end_date_time=$event"
            ></DatePicker>
          </Form-item>
          <Form-item style="margin-left:-70px;">
            <Button icon="md-search" type="primary" @click="handleSearch('sk')">搜索</Button>
            <Button icon="md-refresh" @click="handleReset('sk')">重置</Button>
          </Form-item>
        </Form>
        <Button
          :disabled="exportBtnDisable"
          icon="md-cloud-download"
          style="margin-bottom:15px"
          type="primary"
          @click="exportGasStati('sk')"
        >导出
        </Button>
        <Table :columns="skColumn" :data="skData" :loading="skLoading" border size="small"></Table>
        <Row class="page" justify="end" type="flex">
          <Page
            :current="searchSkForm.pageNumber"
            :page-size="searchSkForm.pageSize"
            :total="skTotal"
            show-total
            @on-change="changePage($event, 'sk')"
          />
        </Row>
      </TabPane>
      <TabPane label="逸华检气罐费用" name="逸华检气罐费用">
        <Form ref="searchYhAmtForm" :label-width="90" :model="searchYhAmtForm" inline>
          <Form-item label="车辆线路：" prop="line">
            <Select
              v-model="searchYhAmtForm.line"
              clearable
              filterable
              placeholder="选择线路"
              style="width:200px;"
            >
              <Option value="-1">全部</Option>
              <Option v-for="item in lines" :key="item.value" :value="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>
          <Form-item label="日期：" prop="date_time">
            <DatePicker
              v-model="searchYhAmtForm.start_date_time"
              format="yyyy-MM-dd"
              placeholder="请选择开始日期"
              style="width: 200px"
              type="date"
              @on-change="searchYhAmtForm.start_date_time=$event"
            ></DatePicker>
            <DatePicker
              v-model="searchYhAmtForm.end_date_time"
              format="yyyy-MM-dd"
              placeholder="请选择结束日期"
              style="width: 200px"
              type="date"
              @on-change="searchYhAmtForm.end_date_time=$event"
            ></DatePicker>
          </Form-item>
          <Form-item style="margin-left:-70px;">
            <Button icon="md-search" type="primary" @click="handleSearch('yhAmt')">搜索</Button>
            <Button icon="md-refresh" @click="handleReset('yhAmt')">重置</Button>
          </Form-item>
        </Form>
        <Button
          :disabled="exportBtnDisable"
          icon="md-cloud-download"
          style="margin-bottom:15px"
          type="primary"
          @click="exportGasStati('yhAmt')"
        >导出
        </Button>
        <Table :columns="yhAmtColumn" :data="yhAmtData" :loading="yhAmtLoading" border size="small"></Table>
        <Row class="page" justify="end" type="flex">
          <Page
            :current="searchYhAmtForm.pageNumber"
            :page-size="searchYhAmtForm.pageSize"
            :total="yhAmtTotal"
            show-total
            @on-change="changePage($event, 'yhAmt')"
          />
        </Row>
      </TabPane>
    </Tabs>
  </Card>
</template>
<script>
import {skStatiList, yhAmtStatiList, yhStatiList} from '../../api/chargeStati'

export default {
  data() {
    return {
      yhLoading: false,
      skLoading: false,
      yhAmtLoading: false,
      yhData: [],
      skData: [],
      yhAmtData: [],
      yhTotal: 0,
      skTotal: 0,
      yhAmtTotal: 0,
      exportBtnDisable: false,
      yhColumns: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '日期',
          key: 'date',
          align: 'center'
        },
        {
          title: '线路',
          key: '线路',
          align: 'center'
        },
        {
          title: '车牌号',
          key: '车牌号',
          align: 'center'
        },
        {
          title: '金额',
          key: 'total_amount',
          align: 'center'
        },
        {
          title: '气量',
          key: 'total_volume',
          align: 'center'
        }
      ],
      skColumn: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '日期',
          key: 'date',
          align: 'center'
        },
        {
          title: '线路',
          key: '线路',
          align: 'center'
        },
        {
          title: '车牌号',
          key: '车牌号',
          align: 'center'
        },
        {
          title: '金额',
          key: 'total_amount',
          align: 'center'
        },
        {
          title: '气量',
          key: 'total_volume',
          align: 'center'
        }
      ],
      yhAmtColumn: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '日期',
          key: 'date',
          align: 'center'
        },
        {
          title: '线路',
          key: 'line',
          align: 'center'
        },
        {
          title: '车牌号',
          key: 'license_plate_num',
          align: 'center'
        },
        {
          title: '金额合计',
          key: 'total_amount',
          align: 'center'
        },
        {
          title: '气量合计',
          key: 'total_volume',
          align: 'center'
        }
      ],
      lines: [],
      searchYhForm: {
        line: '-1',
        start_date_time: '',
        end_date_time: '',
        pageNumber: 1,
        pageSize: 10
      },
      searchSkForm: {
        line: '-1',
        start_date_time: '',
        end_date_time: '',
        pageNumber: 1,
        pageSize: 10
      },
      searchYhAmtForm: {
        line: '-1',
        start_date_time: '',
        end_date_time: '',
        pageNumber: 1,
        pageSize: 10
      }
    }
  },
  mounted() {
    // this.init();
    this.getLinesArray()
  },
  methods: {
    async getLinesArray() {
      this.lines = await this.getLines()
    },
    changePage(v, event) {
      switch (event) {
        case 'yh':
          this.searchYhForm.pageNumber = v
          this.getYhList()
          break
        case 'sk':
          this.searchSkForm.pageNumber = v
          this.getSkList()
          break
        case 'yhAmt':
          this.searchYhAmtForm.pageNumber = v
          this.getYhAmtList()
          break
      }
    },
    //导出
    exportGasStati(event) {
      let line = ''
      let start_date_time = ''
      let end_date_time = ''
      let start_date = ''
      let end_date = ''
      switch (event) {
        case 'yh':
          line = this.searchYhForm.line
          start_date_time = this.searchYhForm.start_date_time
          end_date_time = this.searchYhForm.end_date_time
          if (start_date_time) {
            const start_d = new Date(start_date_time)
            start_date =
              start_d.getFullYear() +
              '-' +
              (start_d.getMonth() + 1) +
              '-' +
              start_d.getDate()
          }
          if (end_date_time) {
            const end_d = new Date(end_date_time)
            end_date =
              end_d.getFullYear() +
              '-' +
              (end_d.getMonth() + 1) +
              '-' +
              end_d.getDate()
          }
          window.location.href =
            '/api/exportYhGasStati?line=' +
            line +
            '&start_date_time=' +
            start_date +
            '&end_date_time=' +
            end_date
          break
        case 'sk':
          line = this.searchSkForm.line
          start_date_time = this.searchSkForm.start_date_time
          end_date_time = this.searchSkForm.end_date_time
          start_date = ''
          end_date = ''
          if (start_date_time) {
            const start_d = new Date(start_date_time)
            start_date =
              start_d.getFullYear() +
              '-' +
              (start_d.getMonth() + 1) +
              '-' +
              start_d.getDate() +
              ' ' +
              start_d.getHours() +
              ':' +
              start_d.getMinutes() +
              ':' +
              start_d.getSeconds()
          }
          if (end_date_time) {
            const end_d = new Date(end_date_time)
            end_date =
              end_d.getFullYear() +
              '-' +
              (end_d.getMonth() + 1) +
              '-' +
              end_d.getDate() +
              ' ' +
              end_d.getHours() +
              ':' +
              end_d.getMinutes() +
              ':' +
              end_d.getSeconds()
          }
          window.location.href =
            '/api/exportSkGasStati?line=' +
            line +
            '&start_date_time=' +
            start_date +
            '&end_date_time=' +
            end_date
          break
        case 'yhAmt':
          line = this.searchYhAmtForm.line
          start_date_time = this.searchYhAmtForm.start_date_time
          end_date_time = this.searchYhAmtForm.end_date_time
          start_date = ''
          end_date = ''
          if (start_date_time) {
            const start_d = new Date(start_date_time)
            start_date =
              start_d.getFullYear() +
              '-' +
              (start_d.getMonth() + 1) +
              '-' +
              start_d.getDate()
          }
          if (end_date_time) {
            const end_d = new Date(end_date_time)
            end_date =
              end_d.getFullYear() +
              '-' +
              (end_d.getMonth() + 1) +
              '-' +
              end_d.getDate()
          }
          window.location.href =
            '/api/exportYhAmtGasStati?line=' +
            line +
            '&start_date_time=' +
            start_date +
            '&end_date_time=' +
            end_date
          break
      }
    },
    getSkList() {
      this.skLoading = true
      skStatiList(this.searchSkForm).then(res => {
        this.skLoading = false
        if (res.data) {
          this.skData = res.data.result
          this.skTotal = res.data.count
        }
      })
    },
    getYhAmtList() {
      this.yhAmtLoading = true
      yhAmtStatiList(this.searchYhAmtForm).then(res => {
        this.yhAmtLoading = false
        if (res.data) {
          this.yhAmtData = res.data.result
          this.yhAmtTotal = res.data.count
        }
      })
    },
    getYhList() {
      this.yhLoading = true
      yhStatiList(this.searchYhForm).then(res => {
        this.yhLoading = false
        if (res.data) {
          this.yhData = res.data.result
          this.yhTotal = res.data.count
        }
      })
    },
    handleReset(event) {
      switch (event) {
        case 'yh':
          this.$refs.searchYhForm.resetFields()
          this.searchYhForm.pageNumber = 1
          this.searchYhForm.pageSize = 10
          this.getYhList()
          break
        case 'sk':
          this.$refs.searchSkForm.resetFields()
          this.searchSkForm.pageNumber = 1
          this.searchSkForm.pageSize = 10
          this.getSkList()
          break
        case 'yhAmt':
          this.$refs.searchYhAmtForm.resetFields()
          this.searchYhAmtForm.pageNumber = 1
          this.searchYhAmtForm.pageSize = 10
          this.getYhAmtList()
          break
      }
    },
    handleSearch(event) {
      switch (event) {
        case 'yh':
          this.searchYhForm.pageNumber = 1
          this.searchYhForm.pageSize = 10
          this.getYhList()
          break
        case 'sk':
          this.searchSkForm.pageNumber = 1
          this.searchSkForm.pageSize = 10
          this.getSkList()
          break
        case 'yhAmt':
          this.searchYhAmtForm.pageNumber = 1
          this.searchYhAmtForm.pageSize = 10
          this.getYhAmtList()
          break
      }
    },
    init() {
      this.getYhList()
      this.getSkList()
      this.getYhAmtList()
    }
  }
}
</script>
<style scoped>
.ivu-tabs .ivu-select-dropdown {
  left: 0 !important;
}

.ivu-tabs-tabpane {
  min-height: 400px;
}
</style>
